<template>
  <el-card class="app-container">
    <!-- <img :src="require('../assets/image/index_img.png')" style="width:100%;height:100%"/> -->
    <div>
      <div class="itemTitle">工作台</div>
      <panel-group @handleSetLineChartData="handleSetLineChartData" />
      <el-row :gutter="8">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div class="itemTitle">AI报警分析</div>
            <raddar-chart />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div class="itemTitle">隐患上报统计</div>
            <line-chart :chart-data="lineChartData" />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div class="itemTitle">巡检统计</div>
            <bar-chart />
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="8" style="margin: 8px 0">
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div style="height: 340px; display: flex; flex-direction: column">
              <div
                style="
                  min-height: 40px;
                  box-sizing: border-box;
                  position: relative;
                "
              >
                <div class="itemTitle">待办事项</div>
                <div
                  @click="jumpMessage"
                  style="
                    color: #999999;
                    position: absolute;
                    top: 10px;
                    right: 8px;
                    cursor: pointer;
                  "
                >
                  更多<i
                    class="el-icon-arrow-right"
                    style="font-weight: 400"
                  ></i>
                </div>
              </div>
              <div style="margin-bottom: 20px2; overflow-y: auto; flex: 1">
                <div
                  v-for="(item, index) in 8"
                  :key="index"
                  style="
                    border: 1px solid #f6f6f6;
                    border-radius: 5px;
                    padding: 10px 5px;
                    cursor: context-menu;
                  "
                >
                  <div
                    style="
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #333333;
                      font-size: 14px;
                    "
                  >
                    <span>missionName</span>
                    <span> item.missionName </span>
                  </div>
                  <div
                    style="
                      font-size: 12px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      color: #999999;
                    "
                  >
                    <span>
                      <i class="el-icon-user"></i>
                      missionName</span
                    >
                    <span>
                      <i class="el-icon-time"></i>
                      missionName
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8" @click="jumpMessage">
          <el-card>
            <div class="itemTitle">系统消息</div>
            <raddar-chart />
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <el-card>
            <div class="itemTitle">特殊作业统计</div>
            <bar-chart />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import message from "./dashboard/message";
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  // messages: {
  //   expectedData: [200, 192, 120, 144, 160, 130, 140],
  //   actualData: [180, 160, 151, 106, 145, 150, 130],
  // },
  // purchases: {
  //   expectedData: [80, 100, 121, 104, 105, 90, 100],
  //   actualData: [120, 90, 100, 138, 142, 130, 130],
  // },
  // shoppings: {
  //   expectedData: [130, 140, 141, 142, 145, 150, 160],
  //   actualData: [120, 82, 91, 154, 162, 140, 130],
  // },
};

export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    message,
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
    };
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    jumpMessage() {},
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    height: 100%;
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
